import React from "react"
import { Panel } from "@xyflow/react"
import { Variable, Container, Play, Clock8, Grid2X2Check, Grid2X2Plus, ChevronDown, History } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle } from "@/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuSeparator,
  DropdownMenuItem
} from "@/components/ui/dropdown-menu"

/**
 * 节点属性面板
 */
const NodePropertiesPanel = () => {
  return (
    <Panel position="top-right" className="h-full">
      <div className="flex flex-col items-end h-full">
        <div className="flex items-center mb-3">
          <Button variant="outline" className="px-2 py-1">
            <Variable className="w-3 h-3" />
          </Button>
          <Button variant="outline" className="px-2 py-1 ml-2">
            <Container className="w-3 h-3" />
          </Button>
          <div className="ml-2">
            <div className="flex items-center p-1 border rounded-md bg-background dark:bg-gray-900">
              <Button variant="ghost" className="h-[26px] px-1">
                <Play className="w-3 h-3 text-blue-700" />
                <div className="text-blue-700">预览</div>
              </Button>
              <Button variant="ghost" className="h-[26px] ml-1 px-1">
                <Clock8 className="w-3 h-3" />
              </Button>
              <Button variant="ghost" className="h-[26px] ml-1 px-1">
                <Grid2X2Check className="w-3 h-3" />
              </Button>
            </div>
          </div>
          <Button variant="outline" className="px-2 py-1 ml-2">
            <Grid2X2Plus className="w-3 h-3" />
            功能
          </Button>
          <div className="ml-2">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button>
                  <div className="text-white">发布</div>
                  <ChevronDown className="w-3 h-3 text-white" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-80" align="start">
                <div className="p-3">
                  <div className="text-xs text-gray-400">当前草稿未发布</div>
                  <div className="text-sm mt-0.5 mb-2">自动保存 · x分钟前</div>
                  <Button className="w-full">
                    <div className="text-white">发布更新</div>
                  </Button>
                </div>
                <DropdownMenuSeparator />
                <DropdownMenuItem>GitHub</DropdownMenuItem>
                <DropdownMenuItem>Support</DropdownMenuItem>
                <DropdownMenuItem>Support</DropdownMenuItem>
                <DropdownMenuItem>Support</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
          <Button variant="outline" className="px-2 py-1 ml-2">
            <History className="w-3 h-3" />
          </Button>
        </div>
        <Card className="flex-1 w-[400px] overflow-y-auto">
          <CardHeader>
            <CardTitle>Workflow</CardTitle>
          </CardHeader>
        </Card>
      </div>
    </Panel>
  )
}

export default NodePropertiesPanel
